<!-- 用户登录界面 -->
<template>
    <div id="login">
        <div class="bg"></div> <!--背景-->
        <el-row class="main-container">
            <el-col :lg="8" :xs="16" :md="10" :span="10">
                <div class="top">
                    <i class="iconfont icon-byGreen"></i>
                    <span class="title">时鲜蔬菜自选管理系统</span>
                </div>

                <div class="bottom">
                    <div class="container">
                        <p class="title">账号登录</p>
                            <!--form表单走起-->
                        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                            <el-form-item v-show="this.formLabelAlign.region == '人脸识别'">
                                <div>
                                    <!--静音播放视频，人脸识别用<video id="video" width="300px" preload autoplay loop muted></video>-->
                                    <!--canvas是画布标签，这里将会展示人脸识别过程，必须使用自带的width与height属性，不能在css里控制，否则会使画布变形，这里我先不显示它-->
                                    <canvas id="canvas" width="250" height="250" style="position: absolute; top: 0; left: 0"></canvas>
                                </div>
                            </el-form-item>

                            <el-form-item label="用户名" v-show="this.formLabelAlign.region !== '人脸识别'"> <!--表达式为true就显示-->
                                <el-input v-model.number="formLabelAlign.userName" placeholder="请输入用户名"></el-input>
                            </el-form-item>

                            <el-form-item label="密码" v-show="this.formLabelAlign.region !== '人脸识别'">
                                <el-input v-model="formLabelAlign.userPassword" placeholder="请输入密码" type="password" show-password></el-input>
                            </el-form-item>

                            <el-form-item label="身份">
                                <el-select v-model="formLabelAlign.region" placeholder="请选择身份登录"> <!--双向绑定选择的的身份-->
                                    <el-option label="用户" value="用户"></el-option>
                                    <el-option label="管理员" value="管理员"></el-option>
                                </el-select>
                            </el-form-item>

                            <div class="submit">
                                <el-button type="primary" class="row-login login" @click="tologin()">登录</el-button>
                            </div>

                             <div class="options">
                              <p class="find"><a href="javascript:;">找回密码</a></p>
                                 <el-form-item v-show="this.formLabelAlign.region === '用户'">
                                 <div class="register">
                                     <span>没有账号?</span>
                                     <span @click="goRegister()"><a href="javascript:;">去注册</a></span>
                                 </div>
                                 </el-form-item>
                             </div>
                        </el-form>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row class="footer">  <!--足部布局-->
            <el-col>
                <p class="msg2"></p>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    import store from '../../store';
    import { mapState } from "vuex";
    export default {
        store,
        name: "Login",
        data() {
            return {
                show: true,
                labelPosition: "left",
                facedata: "",//人脸识别时用到
                formLabelAlign: {
                    region: this.$route.params.region != null ? this.$route.params.region : '用户', //已经登录然后退出的就将身份提前选好
                    userName: "",
                    userPassword: "",
                },
                userContext: "",
                videoEle: null,
                trackerTask: null,
                first: null,
            };
        },
        methods: {
            goRegister(){
                this.$router.push({name: "Register",})
            },
            //用户登录请求后台处理
            login() {
                const  _this=this;//将this赋值给它，不然等下函数回调会出this指向问题
             switch (_this.formLabelAlign.region) {
                    case "用户" :  //用户将会进行的处理方法
                        _this.$axios.post("/api/userLogin",_this.formLabelAlign).then((res)=>{
                            console.log("数据",res);
                            let resData = res.data;
                            if (resData != null && resData != ""){
                                _this.$cookies.set("nickName",resData.userNickname);
                                _this.$cookies.set("id",resData.userId);
                                _this.$cookies.set("region","用户");
                                _this.$cookies.set("picture",resData.userProfilePictureSrc);
                                _this.$router.push({path:'/'});
                            }else {
                                _this.$message({   //弹出错误框
                                    showClose: true,  //设置手动覆盖
                                    type: "error",
                                    message: "用户名或者密码错误",
                                    center: true //内容居中
                                });
                            }
                        });
                        break;
                    case "管理员" ://下面的data我转换成了键值对类型，因为后端按默认接受json字符串，而不接受json对象，想接受对象得用@RequestBody，有点烦
                        _this.$axios.post("/api/adminLogin",`userName=${_this.formLabelAlign.userName}&userPassword=${_this.formLabelAlign.userPassword}`
                        ).then((res)=>{
                            console.log("数据",res);
                            let resData = res.data;
                            if (resData != null && resData != ""){
                                _this.$cookies.set("nickName",resData.adminNickname);
                                _this.$cookies.set("id",resData.adminId);
                                _this.$cookies.set("region","管理员");
                                _this.$cookies.set("picture",resData.adminProfilePictureSrc);
                                _this.$router.push({path:'adminIndex'});
                            }else {
                                _this.$message({
                                    showClose: true,  //设置手动关闭
                                    type: "error",
                                    message: "管理名或者密码错误",
                                    center: true //内容居中
                                });
                            }
                        });
                        break;
             }
            },
            facelogin() {
                // 点击按钮登录事件
                // 点击按钮时拿到登陆者面部信息
                this.userContext.drawImage(video, 0, 0, 450, 300);
                var userImgSrc = document.getElementById("canvas").toDataURL("img/png");
                console.log(userImgSrc);
                // 拿到bash64格式的照片信息
                var faceBase = userImgSrc.split(",")[1];
                // console.log(faceBase)
                var qs = require("qs");
                // axios异步请求
                // console.log(faceBase);
                // let data = new FormData();
                // data.append('faceBase',faceBase);

                this.$router.push("/student");  //直接进入学生模块，不用人脸识别了

                /*this.$axios
                  .post(
                    "http://localhost:8091/facelogin",
                    qs.stringify({
                      faceBase: faceBase,
                    })
                  )
                  .then((response) => {
                    var data1 = response.data;
                    var str = data1.substring(0, 1);

                    //不可以进入学生考试界面了，因为数据库里没有users这张表，人脸没有人脸库比对，注册也没有上传，所以是进不去的。
                    if (str == 2) return this.$message.error("登录失败，请重新验证人脸");
                    this.$message.success("人脸验证成功，祝您考试愉快");
                    this.$router.push("/student");
                  })
                  .catch(function (error) {
                    console.log(error);
                  });*/
            },
            clickTag(key) {  //拿到你按下的那个标签，然后赋给role
                this.role = key;
            },
    /*        diaoyong() {
                /!** 调用摄像头，获取媒体视频流**!/
                var video = document.getElementById("video");  //document处理
                var canvas = document.getElementById("canvas");
                // // 返回画布二维画图环境
                this.userContext = canvas.getContext("2d"); //设置画布属性
                var getUserMedia =
                    // 浏览器兼容,表示在火狐、Google、IE等浏览器都可正常支持
                    navigator.getUserMedia ||
                    navigator.webkitGetUserMedia ||
                    navigator.mozGetUserMedia ||
                    navigator.msGetUserMedia;
                getUserMedia.call( // getUserMedia.call(要调用的对象，约束条件，调用成功的函数，调用失败的函数)
                    window.navigator,
                    { video: true, audio: false },
                    function (localMediaStream) {
                        // 获取摄像头捕捉的视频流，一边录一边播放，video的loop属性会让它一直播放下去
                        video.srcObject = localMediaStream;
                    },
                    function (e) {
                        console.log("获取摄像头失败！！");
                    }
                );
            },*/
            tologin() {
                if (this.formLabelAlign.region !== "人脸识别" && this.formLabelAlign.userName !== "" && this.formLabelAlign.userPassword !== "") { //先搞清楚是哪个身份登录的
                    this.login(); //用户登录去这个方法
                }else {
                    this.$message({
                        showClose: true,  //设置手动关闭
                        type: "warning",
                        message: "请填入登录信息！",
                        center: true //内容居中
                    });

                }
               // this.facelogin();
            },
        },
        pressKeyboard() {        //按下enter键也可以登录

        },

        computed: mapState(["userInfo"]),  //监控并返回userInfo的状态
        mounted() {
            //this.diaoyong();   //mounted为一个钩子函数，在该页面渲染完后会自动调用diaoyong方法
            let that = this;
            document.onkeydown = () =>{
                let keyword = window.event.keyCode
                if (keyword === 13){
                    that.tologin() //按下后直接调用登录方法
                }
            };
        },
    };
</script>

<style scoped>
    #canvas {
        display: none;
    }
    .media {
        position: absolute;
        width: 534px;
        height: 400px;
        margin: 100px auto 0;
        margin-left: 35%;
        margin-top: 15%;
    }
    .container {
        margin-bottom: 32px;
    }
    .container .el-radio-group {
        margin: 30px 0px;
    }
    a:link {
        color: #ff962a;
        text-decoration: none;
    }
    #login {
        font-size: 14px;
        color: #000;
        background-color: #fff;
    }
    #login .bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        overflow-y: auto;
        height: 100%;
        background: url("../../assets/img/loginbg.png") center top / cover no-repeat;
        background-color: #b6bccdd1 !important;
    }
    #login .main-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #login .main-container .top {
        margin-top: 60px;
        font-size: 30px;
        color: #ff962a;
        display: flex;
        justify-content: center;
    }
    #login .top .icon-byGreen {
        font-size: 80px;
    }
    #login .top .title {
        margin-top: 20px;
    }
    #login .bottom {
        display: flex;
        justify-content: center;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    #login .bottom .title {
        text-align: center;
        font-size: 30px;
    }
    .bottom .container .title {
        margin: 30px 0px;
    }
    .bottom .submit .row-login {
        width: 100%;
        background-color: #04468b;
        border-color: #04468b;
        margin: 20px 0px 10px 0px;
        padding: 15px 20px;
    }
    .bottom .submit {
        display: flex;
        justify-content: center;
    }
    .footer {

        text-align: center;
    }
    .footer .msg1 {
        font-size: 18px;
        color: #fff;
        margin-bottom: 15px;
    }
    .footer .msg2 {
        font-size: 14px;
        color: #e3e3e3;

    }
    .bottom .options {
        margin-bottom: 40px;
        color: #ff962a;
        display: flex;
        justify-content: space-between;
    }
    .bottom .options > a {
        color: #ff962a;
    }
    .bottom .options .register span:nth-child(1) {
        color: #8c8c8c;
    }
</style>
